<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=2.0">
    <title>BoLe 智能HR招聘管理系统</title>
    
    <!-- 图标字体 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Chart.js 缩放插件 -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    
    <!-- SortableJS for drag & drop -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/styles/hr_dashboard.css">
    <!-- 布局修复补丁 -->
    <link rel="stylesheet" href="/styles/layout_fixes.css">
    
    <style>
        /* 确保图表容器在小屏幕上的响应式表现 */
        @media (max-width: 480px) {
            .chart-modal-content {
                width: 98%;
                max-height: 98%;
                min-height: 400px;
            }
            
            .chart-container {
                min-height: 250px;
                max-height: 400px;
                padding: 0.5rem;
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .overview-cards {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        
        /* 中等屏幕优化 */
        @media (max-width: 768px) and (min-width: 481px) {
            .charts-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .overview-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
        <div class="header-content">
            <div class="header-left">
                <h1><i class="fas fa-users-cog"></i> BoLe 智能HR系统</h1>
            </div>
            <div class="header-right">
                <div class="theme-controls">
                    <label for="theme-select">主题:</label>
                    <select id="theme-select" class="theme-selector">
                        <option value="light">浅色</option>
                        <option value="dark">深色</option>
                    </select>
                </div>
                <button id="settingsBtn" class="btn btn-secondary">
                    <i class="fas fa-cog"></i> 设置
                </button>
                <button id="helpBtn" class="btn btn-secondary">
                    <i class="fas fa-question-circle"></i> 帮助
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content dashboard">
        <!-- 左侧功能面板 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h3><i class="fas fa-filter"></i> 功能面板</h3>
            </div>
            
            <!-- AI助手对话区 -->
            <div class="ai-chat-section">
                <h4><i class="fas fa-robot"></i> AI招聘助手</h4>
                <div class="chat-input-container">
                    <textarea id="chatInput" placeholder="请输入您的需求，例如：筛选有3年以上Python经验的候选人" rows="3"></textarea>
                    <button id="sendChatBtn" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发送
                    </button>
                </div>
                <div id="chatHistory" class="chat-history">
                    <div class="welcome-message">
                        <i class="fas fa-robot"></i>
                        <p>您好！我是BoLe智能HR助手。我可以帮您：</p>
                        <ul>
                            <li>🔍 筛选和搜索候选人</li>
                            <li>📊 分析候选人匹配度</li>
                            <li>📝 更新候选人记录</li>
                            <li>📈 生成数据分析报告</li>
                        </ul>
                        <p>请告诉我您需要什么帮助？</p>
                    </div>
                </div>
            </div>

            <!-- 筛选控制区 -->
            <div class="filter-section">
                <h4><i class="fas fa-search"></i> 候选人筛选</h4>
                <div class="filter-group">
                    <label for="skillFilter">技能要求:</label>
                    <input type="text" id="skillFilter" placeholder="例如：Python, Java">
                </div>
                <div class="filter-group">
                    <label for="experienceFilter">工作经验:</label>
                    <select id="experienceFilter">
                        <option value="">不限</option>
                        <option value="0-1">0-1年</option>
                        <option value="1-3">1-3年</option>
                        <option value="3-5">3-5年</option>
                        <option value="5+">5年以上</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="locationFilter">工作地点:</label>
                    <input type="text" id="locationFilter" placeholder="例如：北京, 上海">
                </div>
                <button id="applyFiltersBtn" class="btn btn-primary btn-full">
                    <i class="fas fa-filter"></i> 应用筛选
                </button>
            </div>
        </aside>

        <!-- 右侧主内容区域 -->
        <div class="content-area">
            <!-- 概览卡片 -->
            <section class="overview-section">
                <div class="overview-cards" id="overviewCards">
                    <div class="overview-card" id="totalCandidatesCard">
                        <div class="card-header">
                            <i class="fas fa-users"></i>
                            <h3>候选人总数</h3>
                        </div>
                        <div class="card-value">
                            <span id="totalCandidates">--</span>
                        </div>
                        <div class="card-description">系统中的候选人总数</div>
                    </div>
                    
                    <div class="overview-card" id="matchedCandidatesCard">
                        <div class="card-header">
                            <i class="fas fa-user-check"></i>
                            <h3>匹配候选人</h3>
                        </div>
                        <div class="card-value">
                            <span id="matchedCandidates">--</span>
                        </div>
                        <div class="card-description">符合当前条件的候选人</div>
                    </div>
                    
                    <div class="overview-card" id="avgMatchScoreCard">
                        <div class="card-header">
                            <i class="fas fa-chart-line"></i>
                            <h3>平均匹配度</h3>
                        </div>
                        <div class="card-value">
                            <span id="avgMatchScore">--%</span>
                        </div>
                        <div class="card-description">候选人的平均匹配分数</div>
                    </div>
                    
                    <div class="overview-card" id="topSkillCard">
                        <div class="card-header">
                            <i class="fas fa-star"></i>
                            <h3>热门技能</h3>
                        </div>
                        <div class="card-value">
                            <span id="topSkill">--</span>
                        </div>
                        <div class="card-description">候选人最常具备的技能</div>
                    </div>
                </div>
            </section>

            <!-- 候选人列表和分析区域 -->
            <section class="candidates-section">
                <div class="section-tabs">
                    <button class="tab-button active" data-tab="candidates">
                        <i class="fas fa-list"></i> 候选人列表
                    </button>
                    <button class="tab-button" data-tab="analysis">
                        <i class="fas fa-chart-bar"></i> 数据分析
                    </button>
                    <button class="tab-button" data-tab="deep-analysis">
                        <i class="fas fa-microscope"></i> 深度分析
                    </button>
                </div>

                <!-- 候选人列表标签页 -->
                <div class="tab-content active" id="candidates-tab">
                    <div class="candidates-header">
                        <h3>候选人列表</h3>
                        <div class="list-controls">
                            <select id="sortBy" class="sort-selector">
                                <option value="match_score">按匹配度排序</option>
                                <option value="name">按姓名排序</option>
                                <option value="experience">按经验排序</option>
                            </select>
                            <button id="refreshListBtn" class="btn btn-secondary">
                                <i class="fas fa-sync-alt"></i> 刷新
                            </button>
                        </div>
                    </div>
                    <div class="candidates-list" id="candidatesList">
                        <div class="loading-message">
                            <i class="fas fa-spinner fa-spin"></i> 正在加载候选人数据...
                        </div>
                    </div>
                    <div class="pagination" id="pagination">
                        <!-- 分页控件将在这里动态生成 -->
                    </div>
                </div>

                <!-- 数据分析标签页 -->
                <div class="tab-content" id="analysis-tab">
                    <div class="charts-grid" id="chartsGrid">
                        <div class="chart-card" id="skillsChart">
                            <div class="chart-header">
                                <h4><i class="fas fa-code"></i> 技能分布</h4>
                                <button class="chart-expand-btn" data-chart="skills">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                            <div class="chart-container">
                                <canvas id="skillsChartCanvas"></canvas>
                            </div>
                        </div>
                        
                        <div class="chart-card" id="experienceChart">
                            <div class="chart-header">
                                <h4><i class="fas fa-briefcase"></i> 经验分布</h4>
                                <button class="chart-expand-btn" data-chart="experience">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                            <div class="chart-container">
                                <canvas id="experienceChartCanvas"></canvas>
                            </div>
                        </div>
                        
                        <div class="chart-card" id="locationChart">
                            <div class="chart-header">
                                <h4><i class="fas fa-map-marker-alt"></i> 地域分布</h4>
                                <button class="chart-expand-btn" data-chart="location">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                            <div class="chart-container">
                                <canvas id="locationChartCanvas"></canvas>
                            </div>
                        </div>
                        
                        <div class="chart-card" id="matchScoreChart">
                            <div class="chart-header">
                                <h4><i class="fas fa-chart-line"></i> 匹配度分布</h4>
                                <button class="chart-expand-btn" data-chart="matchScore">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                            <div class="chart-container">
                                <canvas id="matchScoreChartCanvas"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 深度分析标签页 -->
                <div class="tab-content" id="deep-analysis-tab">
                    <div class="deep-analysis-container">
                        <div class="analysis-selector">
                            <h4>选择候选人进行深度分析:</h4>
                            <select id="candidateSelect" class="candidate-selector">
                                <option value="">请选择候选人...</option>
                            </select>
                            <button id="startDeepAnalysisBtn" class="btn btn-primary">
                                <i class="fas fa-search"></i> 开始深度分析
                            </button>
                        </div>
                        
                        <div id="deepAnalysisResult" class="deep-analysis-result">
                            <div class="placeholder-message">
                                <i class="fas fa-microscope"></i>
                                <p>选择一个候选人开始深度分析</p>
                                <p class="sub-text">系统将生成详细的能力雷达图、技能匹配分析和面试建议</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- 图表放大模态框 -->
    <div id="chartModal" class="modal">
        <div class="chart-modal-content">
            <div class="chart-modal-header">
                <h3 id="modalChartTitle">图表详情</h3>
                <button class="modal-close" id="closeChartModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="chart-modal-body">
                <canvas id="modalChartCanvas"></canvas>
            </div>
        </div>
    </div>

    <!-- 候选人详情模态框 -->
    <div id="candidateModal" class="modal">
        <div class="candidate-modal-content">
            <div class="candidate-modal-header">
                <h3 id="candidateName">候选人详情</h3>
                <button class="modal-close" id="closeCandidateModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="candidate-modal-body" id="candidateDetailContent">
                <!-- 候选人详情内容将在这里动态生成 -->
            </div>
            <div class="candidate-modal-footer">
                <button class="btn btn-primary" id="deepAnalyzeBtn">
                    <i class="fas fa-microscope"></i> 深度分析
                </button>
                <button class="btn btn-success" id="updateRecordBtn">
                    <i class="fas fa-edit"></i> 更新记录
                </button>
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>正在处理您的请求...</p>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div id="toast" class="toast">
        <div class="toast-content">
            <i id="toastIcon" class="fas fa-info-circle"></i>
            <span id="toastMessage">消息内容</span>
        </div>
    </div>

    <!-- 布局修复脚本 -->
    <script src="/scripts/layout_fixes.js"></script>
    <!-- 候选人卡片显示修复脚本 -->
    <script src="/scripts/candidate_card_fix.js"></script>
    <!-- 自定义脚本 -->
    <script src="/scripts/hr_dashboard.js"></script>
</body>
</html>













